<template>
  <div id="personalInfo">
    <el-row :gutter="20" style="margin-bottom: 10px;">

      <el-col :span="6">
        <div class="infoPanel">
          <el-row>
            <el-col :span="12">
              <el-image class="InfoImg" :src="'http://localhost:8080/fileDownload/getSellerFace?sellerLogo='+this.$store.getters.seller.sellerLogo"
                fit="scale-down"></el-image>
            </el-col>
            <el-col :span="12" align="middle">
              <div style="font-size: 30px;font-weight: bold;"> {{this.$store.getters.seller.sellerName}}</div>
              <div>{{this.$store.getters.seller.sellerAccount}}</div>
            </el-col>
          </el-row>
          <!-- 饼图 -->
          <el-row class="charts" id="pieChart" style="height: 330px;">

          </el-row>
        </div>
      </el-col>
      <!-- 店铺信息 -->
      <el-col :span="18">
        <div class="infoPanel">
          <el-row class="iconPanel" :gutter="-5">
            <el-col :span="8" @click.native="changePanel('buyer')">
              <el-row type="flex" align="middle">
                <div class="infoIcon" style="background-color:  #67C23A;">
                  <el-row type="" justify="center"><i class="el-icon-user-solid"></i>顾客</el-row>
                </div>
                <div v-text="buyers"></div>
              </el-row>
            </el-col>
            <el-col :span="8" @click.native="changePanel('turnover')">
              <el-row type="flex" align="middle">
                <div class="infoIcon" style="background-color: #E6A23C;">
                  <el-row type="" justify="center"><i class="el-icon-money"></i>订单</el-row>
                </div>
                <div v-text="turnover"></div>

              </el-row>
            </el-col>
            <el-col :span="8" @click.native="changePanel('commentsCount')">
              <el-row type="flex" align="middle">
                <div class="infoIcon" style="background-color: #409EFF;">
                  <el-row type="" justify="center"><i class="el-icon-chat-dot-square"></i>评论</el-row>
                </div>
                <div v-text="commentsCount"></div>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="margin: 10px;height: 400px; border-radius: 6px; border: solid 2px #e6e6e6; ">
            <!-- <div style="margin: 0 5px; > -->
            <transition name="el-fade-in">
              <div v-show="showBuyers.show" style="height: 90%;">

              </div>
            </transition>
            <transition name="el-fade-in">
              <ul v-show="showTurnover.show" :infinite-scroll-distance="10" class="dataList" v-infinite-scroll="loadMoreOrder">
                <li v-for="order in showTurnover.list">
                  <el-row style="margin-bottom: 5px;padding: 5px; border: solid 2px #7d7d7d; border-radius: 6px; margin-right: 3px;">
                    <el-row type="flex" align="middle">
                      <el-col :span="2">
                        <el-image fit="contain" style="width: 50px;height: 50px;" :src="'http://localhost:8080/fileDownload/getProductFace?productsLogo='+order.product.productPicture">
                        </el-image>
                      </el-col>
                      <el-col :span="6">
                        <el-tooltip v-if="order.product.productName.length>12" class="item" effect="dark" :content="order.product.productName"
                          placement="top">
                          <span v-text="getStringCut(order.product.productName,12)">{{order.product.productName}}</span>
                        </el-tooltip>
                        <span v-else v-text="getStringCut(order.product.productName,12)">{{order.product.productName}}</span>
                      </el-col>
                      <el-col :span="6">

                      </el-col>
                    </el-row>
                    <el-row style="padding: 10px;border-top:solid 2px #cbcbcb;">
                      <span>收货地址&emsp;</span>

                      <el-tooltip v-if="order.order.orderReceiveAddr.length>20" class="item" effect="dark" :content="order.order.orderReceiveAddr"
                        placement="top">
                        <span>
                          &emsp; {{getStringCut(order.order.orderReceiveAddr,20)}}
                        </span>
                      </el-tooltip>
                      <span v-else>
                        &emsp; {{order.order.orderReceiveAddr}}
                      </span>
                      <span>&emsp;{{order.order.orderReceiveName}}</span>
                      <span>&emsp;{{order.order.orderReceivePhone}}</span>
                    </el-row>
                  </el-row>
                </li>
              </ul>
            </transition>
            <transition name="el-fade-in">
              <!-- <div  style="height: 100%;"> -->
              <ul v-show="showCommentsCount.show" :infinite-scroll-distance="10" class="dataList" v-infinite-scroll="loadMoreComment">
                <li v-for="comment in showCommentsCount.list">
                  <el-row style="margin-bottom: 5px;padding: 5px; border: solid 2px #7d7d7d; border-radius: 6px; margin-right: 3px;">
                    <el-row type="flex" align="middle">
                      <el-col :span="2">
                        <el-image fit="contain" style="width: 50px;height: 50px;" :src="'http://localhost:8080/fileDownload/getProductFace?productsLogo='+comment.product.productPicture">
                        </el-image>
                      </el-col>
                      <el-col :span="6">
                        <el-tooltip v-if="comment.product.productName.length>12" class="item" effect="dark" :content="comment.product.productName"
                          placement="top">
                          <span v-text="getStringCut(comment.product.productName,12)">{{comment.product.productName}}</span>
                        </el-tooltip>
                        <span v-else v-text="getStringCut(comment.product.productName,12)">{{comment.product.productName}}</span>
                      </el-col>
                      <el-col :span="6">
                        <el-rate v-model="comment.commentScore" show-text disabled></el-rate>
                      </el-col>
                    </el-row>
                    <el-row style="padding: 10px; border-top:solid 2px #cbcbcb;">
                      <el-tooltip v-if="comment.commentContent.length>20" class="item" effect="dark" :content="comment.commentContent"
                        placement="top">
                        <el-col :span="12">
                          {{comment.user.userName}}&emsp;:&emsp; {{getStringCut(comment.commentContent,20)}}
                        </el-col>
                      </el-tooltip>
                      <el-col v-else :span="12">
                        {{comment.user.userName}}&emsp;:&emsp; {{getStringCut(comment.commentContent,20)}}
                      </el-col>
                      <el-col :span="4" :offset="8">
                        {{comment.commentTime}}
                      </el-col>

                    </el-row>
                  </el-row>
                </li>
              </ul>
              <!-- </div> -->
            </transition>
            <!-- </div> -->
          </el-row>

        </div>
      </el-col>
    </el-row>
    <el-row class="infoPanel">

      <!-- <el-col class="chartPanel" > -->
      <el-row class="charts" id="lineBarChart" style="height: 800px;">

      </el-row>
      <!-- </el-col> -->
      <!-- <div id="myChart" style="height: 400px;"></div> -->
    </el-row>

  </div>
</template>
<script>
  const echarts = require('echarts');
  const axios = require('axios');
  export default {
    name: 'personInfo',
    data() {
      return {

        showBuyers: {
          list: [],
          show: false,
          params: {
            sellerAccount: this.$store.getters.seller.sellerAccount,
            pageSize: 20,
            pageNum: 1
          }
        },
        showTurnover: {
          list: [],
          show: true,
          params: {
            status: null,
            keyword: '',
            pageNum: 1,
            pageSize: 5,
            sellerAccount: this.$store.getters.seller.sellerAccount,
            orderBy: '',
            desc: true
          }
        },
        showCommentsCount: {
          list: [],
          show: false,
          params: {
            sellerAccount: this.$store.getters.seller.sellerAccount,
            pageSize: 5,
            pageNum: 1,
            orderBy: 'commentTime',
            desc: true
          }
        },
        lineBarChart: {
          title: {
            top: 10,
            x: 'center',
            y: 'top',
            textAlign: 'left',
            text: '数据曲线'
          },
          chart: {},
          color: ["#003366", "#006699", "#4cabce", "#e5323e"],
          dataset: {
            source: [
              ["type", "2012", "2013", "2014", "2015", "2016"],
              ["Forest", 320, 332, 301, 334, 390],
              ["Steppe", 220, 182, 191, 234, 290],
              ["Desert", 150, 232, 201, 154, 190],
              ["Wetland", 98, 77, 101, 99, 40],
              ["Wetlande", 98, 77, 101, 99, 40]
            ]
          },
          legend: {
            bottom: 0
          },
          xAxis: {
            type: "category",
            axisTick: {
              show: false
            }
          },
          yAxis: {},
          series: [{
            type: "line",
            seriesLayoutBy: "row"
          }, {
            type: "bar",
            seriesLayoutBy: "row"
          }, {
            type: "bar",
            seriesLayoutBy: "row"
          }, {
            type: "bar",
            seriesLayoutBy: "row"
          }, {
            type: "bar",
            seriesLayoutBy: "row"
          }]
        },
        pieChart: {
          title: {
            x: 'center',
            y: 'top',
            textAlign: 'left',
            text: '店铺评分'
          },
          tooltip: {},
          series: [{
            radius: '50%',
            name: '商品评价',
            type: 'pie',
            data: []
          }]
        },
        params: {
          sellerAccount: this.$store.getters.seller.sellerAccount,
          groupBy: ''
        },
        tatisticssData: {}
      }
    },

    methods: {
      getOrderDetails() {
        axios.get("http://localhost:8080/order/getOrderBySeller", {
          params: this.showTurnover.params
        }).then(res => {
          this.showTurnover.list = res.data.list
        }).catch(err => {

        })
      },
      getStringCut(string, length) {
        if (string.length <= length)
          return string
        else
          return string.slice(0, length) + '...'
      },
      loadMoreOrder() {
        this.showTurnover.params.pageSize += 5
        this.getOrderDetails()
      },
      loadMoreComment() {
        this.showCommentsCount.params.pageSize += 5
        this.getComments()
      },
      getComments() {
        axios.get("http://localhost:8080/comment/getComments", {
            params: this.showCommentsCount.params
          })
          .then(res => {
            this.showCommentsCount.list = res.data.list
          })
          .catch(err => {
            console.log(err)
          })
      },
      //切换信息框
      changePanel(cmd) {
        if (cmd === 'buyer') {
          this.showTurnover.show = false
          this.showCommentsCount.show = false
          setTimeout(() => {
            this.showBuyers.show = true
          }, 300)
        } else if (cmd === 'turnover') {
          this.showBuyers.show = false
          this.showCommentsCount.show = false
          if (!this.showTurnover.show) {
            this.showTurnover.params.pageSize = 5
            this.getOrderDetails()
          }
          setTimeout(() => {
            this.showTurnover.show = true
          }, 300)
        } else if (cmd === 'commentsCount') {
          this.showBuyers.show = false
          this.showTurnover.show = false
          if (!this.showCommentsCount.show) {
            this.showCommentsCount.params.pageSize = 5
            this.getComments()
          }
          setTimeout(() => {

            this.showCommentsCount.show = true
          }, 300)
        }
      },
      // 设置饼状图
      setPieChart() {
        this.pieChart.chart = echarts.init(document.getElementById('pieChart'), null, {
          renderer: 'svg'
        });
        this.doGetStatistics('commentScore')
          .then(res => {
            res.data.forEach((item) => {
              if (item.commentScore === 1) {
                this.pieChart.series[0].data.push({
                  name: '一星',
                  value: item.commentScoreCount
                })
              } else if (item.commentScore === 2) {
                this.pieChart.series[0].data.push({
                  name: '二星',
                  value: item.commentScoreCount
                })

              } else if (item.commentScore === 3) {
                this.pieChart.series[0].data.push({
                  name: '三星',
                  value: item.commentScoreCount
                })

              } else if (item.commentScore === 4) {
                this.pieChart.series[0].data.push({
                  name: '四星',
                  value: item.commentScoreCount
                })

              } else if (item.commentScore === 5) {
                this.pieChart.series[0].data.push({
                  name: '五星',
                  value: item.commentScoreCount
                })

              }
            })

            this.pieChart.chart.setOption(this.pieChart);
            window.addEventListener("resize", () => {
              this.pieChart.chart.resize();
            });
          })


      },
      // 设置曲线图
      setLineBarChart() {

        this.lineBarChart.chart = echarts.init(document.getElementById('lineBarChart'), null, {
          renderer: 'svg'
        });
        this.lineBarChart.chart.setOption(this.lineBarChart);
        window.addEventListener("resize", () => {
          this.lineBarChart.chart.resize();
        });
      },
      // 获取饼图数据
      getPieChartData() {

      },
      // 获取总数据
      renderStatisticsData() {
        this.doGetStatistics().then(res => {
          this.tatisticssData = res.data[0]
        })
      },
      //获取数据
      doGetStatistics(groupBy) {
        if (groupBy === undefined)
          this.params.groupBy = ''
        else
          this.params.groupBy = groupBy
        return axios.get("http://localhost:8080/order/getStatistics", {
          params: this.params
        })
      }
    },
    computed: {

      turnover() {
        let t
        if (this.tatisticssData.toltalTurnover > 100000000)
          t = (this.tatisticssData.toltalTurnover / 100000000).toFixed(2) + '亿'
        else if (this.tatisticssData.toltalTurnover > 100000)
          t = (this.tatisticssData.toltalTurnover / 10000).toFixed(1) + 'w'
        else if (this.tatisticssData.toltalTurnover > 1000)
          t = (this.tatisticssData.toltalTurnover / 10000).toFixed(1) + 'k'
        else
          t = this.tatisticssData.toltalTurnover
        return t
      },
      commentsCount() {
        let t
        if (this.tatisticssData.totalComment > 100000000)
          t = (this.tatisticssData.totalComment / 100000000).toFixed(2) + '亿'
        else if (this.tatisticssData.totalComment > 100000)
          t = (this.tatisticssData.totalComment / 10000).toFixed(1) + 'w'
        else if (this.tatisticssData.totalComment > 1000)
          t = (this.tatisticssData.totalComment / 10000).toFixed(1) + 'k'
        else
          t = this.tatisticssData.totalComment
        return t
      },
      buyers() {
        let t
        if (this.tatisticssData.buyers > 100000000)
          t = (this.tatisticssData.buyers / 100000000).toFixed(2) + '亿'
        else if (this.tatisticssData.buyers > 100000)
          t = (this.tatisticssData.buyers / 10000).toFixed(1) + 'w'
        else if (this.tatisticssData.buyers > 1000)
          t = (this.tatisticssData.buyers / 10000).toFixed(1) + 'k'
        else
          t = this.tatisticssData.buyers
        return t
      }
    },
    created() {
      this.getComments()
      this.renderStatisticsData()
      this.getOrderDetails()
      setTimeout(() => {
        this.setPieChart();
        this.setLineBarChart();
      }, 200)

    }
  }
</script>

<style>
  li {
    list-style: none;
  }

  .dataList {
    overflow: scroll;
    height: 90%;
  }

  .dataList .el-row {
    background-color: white;
  }

  .dataList::-webkit-scrollbar {
    width: 10px;
  }

  .dataList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #2f77be;
  }

  .chartPanel {
    padding: 4px;
  }

  .chartTitle {
    text-align: center;
    padding: 10px;
    font-size: 30px;
    font-weight: bold;
  }

  .charts {

    border: #cbcbcb solid 2px;
    border-radius: 6px;
  }

  .infoIcon+div {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
  }

  .iconPanel .el-col:hover {
    box-shadow: 8px 8px 4px rgba(0, 0, 0, .12), 0px 0px 6px rgba(0, 0, 0, 0.1);
    transition: .1s linear;
  }

  .iconPanel {

    margin: 10px;
  }

  .iconPanel .el-col {
    border-radius: 6px;
    cursor: pointer;
    padding: 10px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
  }

  .infoIcon .el-row {
    font-weight: bold;
    font-size: 25px;
  }

  .infoIcon {
    width: 100%;
    border-radius: 4px;
    padding: 5px;
    font-size: 40px;
    color: #FFFFFF;
  }

  .InfoImg {
    width: 150px;
    height: 150px;
    border: #cbcbcb solid 2px;
    border-radius: 6px;
  }

  .infoPanel {

    /* margin: 10px; */
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    padding: 10px 10px;
    background-color: #FFFFFF;
  }

  #personalInfo span {
    font-weight: bold;
  }

  #personalInfo {
    background-color: #E4E7ED;
  }
</style>
